html, body {
  overflow-x: hidden;
}

.info-section,
.sesion-2-info-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 60px auto;
  padding: 20px;
  gap: 40px;
}

.info-text,
.sesion-2-info-text {
  flex: 1;
  padding: 10px;
}

.info-text h2,
.sesion-2-info-text h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.info-text p,
.sesion-2-info-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #444;
}

.info-image,
.sesion-2-info-image {
  flex: 1;
}

.info-image img,
.sesion-2-info-image img {
  width: 100%;
  max-width: 130%;
  height: auto;
  border-radius: 8px;
}

/* Galerías */
.gallery-grid,
.sesion-2-gallery {
  display: grid;
  gap: 10px;
  max-width: 800px;
  margin: 60px auto;
  padding: 10px;
}

.gallery-grid {
  grid-template-columns: repeat(2, 1fr);
}

.sesion-2-gallery {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-grid img,
.sesion-2-gallery img.img-sesion-2 {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.sesion-2-gallery img.img-sesion-2:hover {
  transform: scale(1.05);
}

/* Banner overlay */
.overlay-banner,
.sesion-2-overlay-banner {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  max-width: 100vw;
}

.overlay-banner img,
.sesion-2-overlay-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.overlay-box,
.sesion-2-overlay-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(20, 20, 20, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.overlay-box h3,
.sesion-2-overlay-box h3 {
  color: #fff;
  font-size: 2rem;
  text-align: center;
  max-width: 90vw;
  word-break: break-word;
  line-height: 1.3;
  margin: 0;
}

/* Hero Banner */
.hero-banner,
.sesion-2-hero-banner {
  width: 100%;
  height: 350px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  display: block;
  line-height: 0;
}

.hero-banner img,
.sesion-2-hero-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 20%; /* Aquí se mueve un poco hacia abajo */
  transform: translateZ(0);
}


.sesion-2-footer-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transform: translateX(300px); /* mueve 10px a la izquierda */
}

.sesion-2-footer-banner,
.sesion-2-banner-wrapper {
  overflow: hidden;
}


.sesion-2-overlay-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  margin-top: -800px; /* Mueve la imagen 15px hacia abajo */
}

/* Estilos base del modal (oculto por defecto) */
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.image-modal img {
  max-width: 100%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 10px;
}

.image-modal.active {
  display: flex;
}

/* Ajustes individuales */
.img1 { object-position: center 20%; } /* más arriba */
.img2 { object-position: center 50%; } /* centrado */
.img3 { object-position: center 35%; }
.img4 { object-position: center 25%; }
.img5 { object-position: center 45%; }
.img6 { object-position: center 35%; } /* más abajo */

/* sesion 3  */

.hero-banner img.img-sesion-3 {
  width: 100%;
  height: 100vh; /* Usa altura relativa al viewport */
  display: block;
  object-fit: cover;
  object-position: center 25%; /* Ajusta entre 0% (arriba) y 100% (abajo) */
}

.footer-banner img.img-sesion-3 {
  transform: translateX(-35%);
}

.gallery-grid.sesion-3-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 900px;
  margin: 0 auto 60px auto;
  padding: 10px;
}



/* Ajustes individuales para encuadre */
.img1 {
   object-position: 50% 20%; /* ajuste fino */
}

.img2 {
   object-position: 50% 30%; /* ajuste fino */
}

.img3 {
   object-position: 50% 25%; /* ajuste fino */
}

.img4 {
  object-position: 50% 20%; /* ajuste fino */
}

.overlay-banner img.img-sesion-3 {
  object-fit: cover;
  object-position: center 20%; /* Mueve el encuadre hacia arriba */
  width: 100%;
  height: 100%;
  display: block;
}






/* sesion 4 */

.hero-banner img.img-sesion-4 {
  width: 100%;
  height: 100vh;
  display: block;
  object-fit: cover;
  object-position: center 20%; /* Puedes ajustar este valor */
}

.footer-banner img.img-sesion-4 {
  transform: translateX(-5%); /* Ajusta el desplazamiento horizontal si lo deseas */
}

.gallery-grid img.img-sesion-4 {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Ajustes individuales para encuadre */
.img1 {
   object-position: 50% 25%;
}

.img2 {
   object-position: 50% 35%;
}

.img3 {
   object-position: 50% 30%;
}

.img4 {
   object-position: 50% 20%;
}

.overlay-banner img.img-sesion-4 {
  object-fit: cover;
  object-position: center 18%;
  width: 100%;
  height: 100%;
  display: block;
}




/* sesion 5 */
.footer-banner img.img-sesion-5 {
  transform: translateX(-35%); /* Ajusta el desplazamiento horizontal si lo deseas */
}

.gallery-grid.sesion-5-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px;
}





/* sesion 6  */
.gallery-grid.sesion-6-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 900px;
  margin: 0 auto 60px auto;
  padding: 10px;
}

/* Ajustes individuales para encuadre */
.img1 {
   object-position: 50% 20%; /* ajuste fino */
}

.img2 {
   object-position: 50% 30%; /* ajuste fino */
}

.img3 {
   object-position: 50% 25%; /* ajuste fino */
}

.img4 {
  object-position: 50% 20%; /* ajuste fino */
}


.overlay-banner img.img-sesion-6 {
  object-fit: cover;
  object-position: center 18%;
  width: 100%;
  height: 100%;
  display: block;
}




/* Estilo exclusivo para la galería de la sesión 7 */
.hero-banner img.img-sesion-7 {
  width: 100%;
  height: 100vh; /* Usa altura relativa al viewport */
  display: block;
  object-fit: cover;
  object-position: center 42%; /* Ajusta entre 0% (arriba) y 100% (abajo) */
}

.sesion-7-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 40px 20px;
}

.sesion-7-gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.overlay-banner img.img-sesion-7 {
  object-fit: cover;
  object-position: center 18%;
  width: 100%;
  height: 100%;
  display: block;
}




/* Estilo exclusivo para la galería de la sesión 8 */
.hero-banner img.img-sesion-8 {
  width: 100%;
  height: 100vh; /* Usa altura relativa al viewport */
  display: block;
  object-fit: cover;
  object-position: center 23%; /* Ajusta entre 0% (arriba) y 100% (abajo) */
}

.sesion-8-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 40px 20px;
}

.sesion-8-gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.overlay-banner img.img-sesion-8 {
  object-fit: cover;
  object-position: center 30%;
  width: 100%;
  height: 100%;
  display: block;
}

.footer-banner img.img-sesion-8 {
  transform: translateX(-15%); /* Ajusta el desplazamiento horizontal si lo deseas */
}



/* Estilo exclusivo para la galería de la sesión 9 */
.hero-banner img.img-sesion-9 {
  width: 100%;
  height: 100vh; /* Usa altura relativa al viewport */
  display: block;
  object-fit: cover;
  object-position: center 70%; /* Ajusta entre 0% (arriba) y 100% (abajo) */
}

.s9-img1 { object-position: center 60%; }
.s9-img2 { object-position: center 35%; }
.s9-img3 { object-position: center 18%; }
.s9-img4 { object-position: center 40%; }
.s9-img5 { object-position: center 15%; }
.s9-img6 { object-position: center 50%; }







/* Estilos móviles generales para 768px o menos */
@media (max-width: 768px) {
  .info-section,
  .sesion-2-info-section {
    flex-direction: column;
    gap: 20px;
    padding: 10px;
  }

  .info-text h2,
  .sesion-2-info-text h2 {
    font-size: 1.5rem;
  }

  .info-text p,
  .sesion-2-info-text p {
    font-size: 1rem;
  }

  .info-image img,
  .sesion-2-info-image img {
    max-width: 100%;
  }

  .gallery-grid,
  .sesion-2-gallery {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }

  .gallery-grid img,
  .sesion-2-gallery img.img-sesion-2 {
    height: 200px;
  }

  .overlay-banner,
  .sesion-2-overlay-banner {
    height: 300px;
    overflow: hidden;
  }

  .overlay-box,
  .sesion-2-overlay-box {
    padding: 0 10px;
    box-sizing: border-box;
  }

  .overlay-box h3,
  .sesion-2-overlay-box h3 {
    font-size: 1.4rem;
    padding: 0 15px;
    max-width: 95vw;
    word-break: break-word;
    line-height: 1.3;
    margin: 0;
  }

  .sesion-2-hero-banner img {
    margin-top: 20px;
  }

  .sesion-2-footer-banner,
  .footer-banner {
    overflow: hidden;
    position: relative;
  }

  .sesion-2-footer-banner img {
    width: 500%;
    height: auto;
    display: block;
    object-fit: cover;
    transform: translateX(-35%);
  }

  .footer-banner img {
    width: 500%;
    height: auto;
    display: block;
    object-fit: cover;
    transform: translateX(-50%);
  }

  /* Posicionamiento individual de imágenes */
  .img1 { object-position: center 40%; }
  .img2 { object-position: center 45%; }
  .img3 { object-position: 50% 15%; }
  .img4 { object-position: 50% 20%; }
  .img5 { object-position: center 30%; }
  .img6 { object-position: center 20%; }

  .footer-banner img.img-sesion-4 {
    transform: translateX(-30%) scale(0.95);
  }

  .footer-banner img.img-sesion-5 {
    transform: translateX(-45%) scale(0.95);
  }

  .footer-banner img.img-sesion-6 {
    transform: translateX(-38%) scale(0.95);
  }

  .sesion-2-overlay-banner img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin-top: 0;
  }
}

/* Estilo adicional para evitar interacción en desktop */
@media (min-width: 769px) {
  .gallery-grid.sesion-2-gallery img {
    cursor: default;
    pointer-events: none;
  }
}

/* Diseño responsive para galería de sesión 7 */
@media (max-width: 1024px) {
  .sesion-7-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .sesion-7-gallery {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-banner-img.img-sesion-7 {
    width: 100%;
    height: 300px; /* o la altura que quieras */
    object-fit: cover;
    object-position: center 97%; /* sube la imagen */
    display: block;
  }
}

@media (max-width: 768px) {
  .hero-banner img.img-sesion-7 {
    width: 100%;
    height: 300px; /* ajusta la altura que quieras */
    object-fit: cover;
    object-position: center 25%; /* mueve la imagen hacia arriba */
    display: block;
  }
}
@media (max-width: 768px) {
  .sesion-7-gallery img.img1 { object-position: center 15%; }
  .sesion-7-gallery img.img2 { object-position: center 20%; }
  .sesion-7-gallery img.img3 { object-position: 50% 15%; }
  .sesion-7-gallery img.img4 { object-position: 50% 20%; }
  .sesion-7-gallery img.img5 { object-position: center 30%; }
  .sesion-7-gallery img.img6 { object-position: center 12%; }
  .sesion-7-gallery img.img7 { object-position: center 35%; }
  .sesion-7-gallery img.img8 { object-position: center 12%; }
  .sesion-7-gallery img.img9 { object-position: 50% 12%; }
  .sesion-7-gallery img.img10 { object-position: 50% 30%; }
  .sesion-7-gallery img.img11 { object-position: center 35%; }
  .sesion-7-gallery img.img12 { object-position: center 40%; }
}

@media (max-width: 768px) {
  .sesion-7-footer-banner .banner-wrapper img {
    transform: translateX(-750px);
  }
}

@media (max-width: 768px) {
  .sesion-8-gallery img.img1 { object-position: center 28%; }
  .sesion-8-gallery img.img2 { object-position: center 25%; }
  .sesion-8-gallery img.img3 { object-position: 50% 23%; }
  .sesion-8-gallery img.img4 { object-position: center 20%; }
  .sesion-8-gallery img.img5 { object-position: center 25%; }
  .sesion-8-gallery img.img6 { object-position: 50% 25%; }
  .sesion-8-gallery img.img7 { object-position: center 25%; }
  .sesion-8-gallery img.img8 { object-position: center 30%; }
  .sesion-8-gallery img.img9 { object-position: center 25%; }
}

@media (max-width: 768px) {
  .sesion-8-footer-banner .banner-wrapper img {
    transform: translateX(-750px);
  }
}